<template>
	<view class="content">
		<u-toast ref="uToast" />
		<u-modal v-model="appShow" content="是否需要下架该APP" show-cancel-button @confirm="getdeleteParent" mask-close-able
			@cancel="geteditAppSilent" title="应用管理" confirm-text="从市场下架" cancel-text="改为非静默" :confirm-style="app_btns"
			:cancel-style="app_btns"></u-modal>
		<view class="table_header">已部署{{appData.length}}个应用，成功安装{{installs.length}}个应用</view>
		<view class="table_center box box-pack-between box-align-center box_radius" v-for="item in appData"
			:key="item.id">
			<view class="lfet box box-align-center">
				<view class="left_app">
					<view class="box box-pack-center">
						<view class="app_img">
							<image :src="item.app_img" mode=""></image>
						</view>
					</view>
					<view class="img_txt">{{item.app_name}}</view>
				</view>
				<view class="centent">
					<view class="txt">版本号: {{item.app_version_name}}</view>
					<view class="txt">部署类型: {{item.is_silent ? '强制' : '非强制'}}</view>
					<view class="txt">安装状态: {{item.install ? '已安装' : '未安装'}}</view>
					<view class="txt" v-if="item.install">安装时间: <text style="font-size: 16rpx;">{{item.install_time | newDate}}</text>
					</view>
				</view>
			</view>
			<view class="right">
				<u-button class="app_btn" size="mini" :custom-style="app_btn" @click="appPush(item.id)">管理</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryParentApp,
		deleteParent,
		editAppSilent
	} from '@/api/application.js'
	export default {
		data() {
			return {
				appData: [],
				appShow: false,
				appId: 0,
				app_btn: {
					color: '#FFFFFF',
					'background-color': '#2979ff',
					'letter-spacing': '8rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'font-weight': '600',
					'border-radius': '80rpx',
					'padding': '0 30rpx'
				},
				app_btns: {
					color: '#FFFFFF',
					'background-color': '#2979ff',
					'letter-spacing': '8rpx',
					'line-height': '60rpx',
					overflow: 'hidden',
					'border-radius': '60rpx',
					'margin': '20rpx 15px',
					'font-size': '24rpx',
					'height': '60rpx'
				},
			}
		},
		computed: {
			installs() {
				return this.appData.filter(item => {
					if (item.install == 1) {
						return item
					}
				})
			}
		},
		onShow() {
			this.getqueryParentApp()
		},
		methods: {
			geteditAppSilent() {
				editAppSilent({
					appId: this.appId,
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					snId: uni.getStorageSync('snId')
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
					this.getqueryParentApp()
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			},
			appPush(id) {
				console.log('---------1', id)
				this.appId = id
				this.appShow = true
			},
			getqueryParentApp() {
				queryParentApp({
					snId: uni.getStorageSync('snId')
				}).then(res => {
					this.appData = res.data
					console.log('我的应用', this.appData)
				}).catch(err => {
					console.log('获取我的应用失败', err)
					this.appData = []
				})
			},
			getdeleteParent(id) {
				this.$u.debounce(() => {
					deleteParent({
						lastIp: uni.getStorageSync('Ip'),
						snId: uni.getStorageSync('snId'),
						userId: uni.getStorageSync('userId'),
						appId: this.appId
					}).then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							icon: false,
							type: 'success'
						})
						this.getqueryParentApp()
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.msg,
							icon: false,
							type: 'error'
						})
					})
				}, 1000)
			}
		}
	}
</script>

<style>
	button[disabled]:not([type]) {
		background-color: #f7f7f7 !important;
		color: rgba(0, 0, 0, .3) !important;
	}
</style>

<style lang="scss" scoped>
	.content {
		margin: 40rpx;

		.td {
			width: 25%;
			text-align: center;
		}

		.lfet {
			width: 100%;

			.left_app {
				width: 40%;
				text-align: center;
			}
		}

		.table_center {
			margin-top: 20rpx;
			font-size: 24rpx;
			background-color: #F8F8F8;
			padding: 40rpx 40rpx 40rpx 0;
			color: #333333;

			.app_img {
				height: 80rpx;
				width: 80rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.img_txt {
				margin-top: 20rpx;
				width: 100%;
			}

			.app_btn {
				background-color: #2979ff;
				color: #FFFFFF;
				border-radius: 40rpx;
				overflow: hidden;
				// padding: 10rpx 40rpx;

			}

			.centent {

				.txt {
					line-height: 40rpx;
					letter-spacing: 2rpx;
					font-size: 20rpx;
				}
			}
		}
	}
</style>
